<template>
  <div class="fullMain">
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert">{{ alertText }}</alert>
    </div>
    <x-header
      class="header"
      :left-options="{ backText: '人员选择', showBack: true }"
    >
      <a slot="right" @click="saveModify">提交({{ choosedUserId.length }})</a>
    </x-header>
    <!-- </div> -->
    <div style="height: 20px; background-color: rgb(237, 237, 237)" />
    <group class="memberListWrap">
      <!-- 搜索框 -->
      <div class="search">
        <div class="choosedResult">
          <i
            v-if="choosedItem.length === 0"
            class="fa fa-search"
            aria-hidden="true"
          ></i>
          <div
            class="choosedAvatar"
            v-else
            v-for="(item, index) in choosedItem"
            :key="index"
          >
            <img :src="item.detail.avatar" @click="deleteItem(item)" />
          </div>
        </div>
        <x-input
          class="searchInput"
          placeholder="搜索"
          v-model="searchKey"
          :show-clear="false"
          @on-focus="onFocus"
          @on-blur="onBlur"
        ></x-input>
      </div>
      <br /><br />
      <!-- 选择框 -->
      <ul class="chooseListWrap">
        <li
          class="chooseList"
          v-for="(item, index) in chooseList"
          :key="index"
          @click="chooseMember(item)"
        >
          <i
            class="fa fa-circle-thin circle"
            v-if="choosedUserId.indexOf(item.userId) === -1"
          ></i>
          <i class="fa fa-check-circle circle check" v-else></i>
          <img :src="item.detail.avatar" alt />
          <p>{{ item.detail.name }}</p>
        </li>
      </ul>
    </group>
  </div>
</template>

<script>
import { XHeader, Group, XInput, PopupRadio } from "vux";
import { compareByPinyin } from "utilMethods/sort.js";
import { mapState } from "Vuex";
import task from "api/task";
export default {
  components: {
    XHeader,
    Group,
    XInput,
    PopupRadio,
  },
  data() {
    return {
      searchKey: "",
      chooseList: [], //页面显示的可选择列表。总列表/搜索列表
      memberList: this.$route.params.memberList, //总列表
      choosedUserId: [],
      choosedItem: [],
      searchResult: [], //搜索结果列表
      leaderOrMember: this.$route.params.leaderOrMember,
      mustPerson: "",
    };
  },

  mounted() {
    this.getExecutorList();
    this.getInitData();
  },

  watch: {
    searchKey(val) {
      this.getSearchResult(val);
    },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  methods: {
    saveModify() {
      this.$router.go(-1);
      if (this.leaderOrMember === "leader") {
        localStorage.setItem(
          "leaderChoosedItem",
          JSON.stringify(this.choosedItem)
        );
      } else if (this.leaderOrMember === "member") {
        localStorage.setItem(
          "memberChoosedItem",
          JSON.stringify(this.choosedItem)
        );
      } else if (this.leaderOrMember === "goalMember") {
        localStorage.setItem(
          "goalMemberChoosedItem",
          JSON.stringify(this.choosedItem)
        );
      }
    },
    // 获取初始化信息，负责人和执行人的列表
    getInitData() {
      this.mustPerson = this.userInfo;
      if (this.leaderOrMember === "leader") {
        let leaderChoosedItem = localStorage.getItem("leaderChoosedItem");
        if (
          leaderChoosedItem !== "[]" &&
          leaderChoosedItem !== undefined &&
          leaderChoosedItem != ""
        ) {
          this.choosedItem = JSON.parse(leaderChoosedItem);
        }
        this.choosedItem.push(this.mustPerson);
      } else if (this.leaderOrMember === "member") {
        let memberChoosedItem = localStorage.getItem("memberChoosedItem");
        if (!memberChoosedItem) {
          this.choosedItem = JSON.parse(memberChoosedItem);
        }
      } else if (this.leaderOrMember === "goalMember") {
        let memberChoosedItem = localStorage.getItem("memberChoosedItem");
        if (!memberChoosedItem) {
          this.choosedItem = JSON.parse(memberChoosedItem);
        }
      }
      this.choosedItem.forEach((element) => {
        this.choosedUserId.push(element.userId);
      });

    },
    // 获取负责人/执行人列表
    async getExecutorList() {
      const result = await task.getTaskExecutorMember();
      let temp = result.data;
      let memberTemp = [];
      // 判断下有无传递memberList，如果没有，直接用总列表
      // 如果有，在总列表中进行筛选
      if (this.memberList === undefined || this.memberList.length === 0) {
        this.memberList = temp;
      } else {
        temp.forEach((element) => {
          if (this.memberList.indexOf(element.userId) !== -1) {
            memberTemp.push(element);
          }
        });
        this.memberList = memberTemp;
      }
      this.memberList.sort(compareByPinyin("detail name"));
      this.chooseList = this.memberList;
    },
    chooseMember(item) {
      if (
        this.leaderOrMember === "leader" &&
        item.userId === this.mustPerson.userId
      ) {
        return;
      }
      let indexTemp = this.choosedUserId.indexOf(item.userId);
      if (indexTemp !== -1) {
        //重复点击的时候——删除
        this.choosedUserId.splice(indexTemp, 1);
        this.choosedItem.splice(indexTemp, 1);
      } else {
        this.choosedUserId.push(item.userId);
        this.choosedItem.push(item);
        this.searchKey = "";
      }
    },
    getSearchResult(searchKey) {
      this.searchResult.length = 0;
      this.memberList.forEach((element) => {
        if (element.detail.name.indexOf(searchKey) !== -1) {
          this.searchResult.push(element);
        }
      });
    },
    onFocus() {
      this.chooseList = this.searchResult;
    },
    onBlur() {
      if (this.searchKey === null) {
        this.chooseList = this.memberList;
      }
    },
    deleteItem(item) {
      if (item.userId === this.mustPerson.userId) {
        return;
      }
      let indexTemp = this.choosedUserId.indexOf(item.userId);
      this.choosedUserId.splice(indexTemp, 1);
      this.choosedItem.splice(indexTemp, 1);
    },
  },
};
</script>

<style scoped>
.header {
  background-color: white;
  position: fixed;
  /* top: 0;
  left: 0; */
  width: 100%;
}
.header a {
  color: white;
  font-size: 14px;
  background-color: #0bbe5d;
  border-radius: 5px;
  padding: 3px 10px;
}
/* 内容区 */
.memberListWrap {
}
/* 顶部搜索 */
.search {
  display: flex;
  padding-left: 10px;
  position: fixed;
  /* top: 0;
  left: 0; */
}

.search i {
  font-size: 20px;
  line-height: 40px;
  margin-left: 10px;
}
.search .choosedResult {
  display: flex;
  max-width: 90%;
  overflow: auto;
}
.search .choosedResult .choosedAvatar {
}
.search .choosedResult .choosedAvatar img {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  padding: 5px 2px 0 2px;
}
.search .searchInput {
}
/* 人员显示 */
.chooseListWrap {
  padding: 0;
  background-color: white;
  position: fixed;
  height: 100%;
  width: 100%;
  overflow: scroll;
}
.chooseListWrap .chooseList {
  list-style-type: none;
  border-bottom: 1px solid #ececec;
  padding: 2px 0;
}

.chooseListWrap .chooseList .circle {
  font-size: 20px;
  padding: 0 10px;
}
.check {
  color: #0bbe5d;
}
.chooseListWrap .chooseList img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  vertical-align: middle;
  padding-right: 20px;
}
.chooseListWrap .chooseList p {
  display: inline;
}
</style>